<!--手续费设置-->
<template>
  <div class="bg">

    <div class="fee-content bg3">

      <text class="fee-title font36 text1">{{T('手续费')}}</text>
      <div class="height40"></div>
      <text class="fee-text text2">{{T('设置您的单向taker手续费，我们将在收益计算中扣除它')}}</text>

      <div class="fee-input-bg bg1">
        <input class="fee-input font28 text1" v-model="tradeFee" type="number" :placeholder="T('手续费')" @input="onInput" @focus="onFocus" @blur="onBlur">
        <div class="fee-line no1"></div>
        <text class="font28 text2">{{'%'}}</text>
      </div>

      <div class="row ">
        <div class="fee-but no1" @click="cancelClick"><text class="font32 text1">{{T('取消')}}</text></div>
        <div class="all"></div>
        <div class="fee-but main1" @click="okClick"><text class="font32 text1">{{T('确认')}}</text></div>
      </div>
    </div>
  </div>
</template>

<script>

import navigator from "@/_js/navigator"; 
import broadcast from "@/_js/broadcast"; 
import modal from "@/_js/modal";
import math from "@/_js/math";
import API from "@/_js/api";

import weexHttp from "@/_js/https"; ;

import I18N from "@/_i18n/i18n";
var T = I18N.t;

export default {
  data() {
    return {
      T:T,
      math:math,
      
      select:false,

      apiId: '',
      tradeFee: '',
    };
  },

  mounted() {

    var tradeFee = navigator.getParam("tradeFee");
    this.tradeFee = tradeFee.length ? math.cheng(tradeFee, '100') : tradeFee;
    this.apiId = navigator.getParam("apiId");
  },

  methods: {

    //httpApi-修改手续费
    httpUpdateTradeFee(){

      var tradeFee = math.chu(this.tradeFee, '100', 6, 2);

      if (this.apiId == '--') {
        modal.toast(T('修改成功'));
        this.noticeFee(tradeFee);
        return;
      }
      modal.showLoad();
      var param = {'apiId':this.apiId, 
                   'tradeFee':tradeFee};
      weexHttp.postX("assetsV3/updateTradeFee",param,true,(data)=>{
        modal.hideLoad();
        if(data.status == 200){
          modal.toast(T('修改成功'));
          API.setApiTradeFee(this.apiId, tradeFee);
          this.noticeFee(tradeFee);
        } else {
          modal.toast(data.msg);
        }
      });
    },

    /********************************************** 通知*/
    //手续费改变通知
    noticeFee(tradeFee){
      broadcast.send('ApiFee', tradeFee);
      this.cancelClick();
    },

    /********************************************** 输入框回调*/
    //输入框-选中
    onFocus(e) {
      this.select = true;
    },

    //输入框-取消选中
    onBlur(e) {
      this.select = false;
    },

    //输入内容改变
    onInput(e){
    },

    /********************************** 点击触发*/
    //取消点击
    cancelClick(){
      navigator.dismiss();
    },

    //确定点击
    okClick(){
      
      if (this.tradeFee.length == 0) {
        modal.toast(T('请输入手续费'));
      } else if (math.getNumber(this.tradeFee) > 1) {
        modal.toast(T('手续费不合法'));
      } else {
        this.httpUpdateTradeFee();
      }
    },
  }
}

</script>


<style src="@/_css/style.css"></style>
<style scoped>
/******************************************************* 手续费*/
.bg {
  flex-direction: row;
  justify-content: center;
  align-items: center;
  width: 750px;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;

  background-color: rgba(0, 0, 0, 0.25);
}
.fee-content {
  flex-direction: column;
  width: 642px;
  height: 582px;
  background: #202B46;
  border-radius: 4px;

  padding-top: 60px;
  padding-bottom: 60px;
  padding-left: 50px;
  padding-right: 50px;
}
.fee-title {
  width: 542px;
  text-align: center;
}
.fee-text {
  width: 542px;
  line-height: 40px;
}
.fee-input-bg {
  flex-direction: row;
  align-items: center;
  width: 540px;
  height: 88px;
  border-radius: 44px;
  padding-left: 40px;
  padding-right: 40px;

  margin-top: 40px;
}
.fee-input {
  flex: 1;
  height: 88px;
  placeholder-color:#6E7488;
}
.fee-line{
  width: 2px;
  height: 32px;
  margin-left: 20px;
  margin-right: 20px;
}
.fee-but{
  flex-direction: row;
  justify-content: center;
  align-items: center;
  width: 240px;
  height: 80px;
  border-radius: 4px;
  margin-top: 60px;
}

.height40 {
  height: 40px;
}
</style>